<template>
    <my-dailog v-model:show="showFlag" :styleType="9" :showtopclose="true" height="90%" @close="close">
        <div class="propVisitsDgWrap">
            <div class="propDgTitle" v-t="'bidRecord.text1'">Bid Record</div>
            <div class="propVisitsDgMain">
                <div class="biRecordBox">
                    <ul class="bidRecordlist" v-if="records && records.length>0">
                        <li v-for="dt in records" :key="dt">
                            <div class="bidimgbox">
                                <Image :url="dt.bidderHeadImage"/>
                            </div>
                            <div class="biditem tbrtx">
                                <h5>{{dt.bidderName}}</h5>
                                <p>{{dt.createTime}}</p>
                            </div>
                            <div class="biditem" v-if="dt.bidAmount">
                                <template v-if="dt.bidType==1">
                                    <h5 v-t="'bidRecord.text2'">Initial casting</h5>
                                    <p></p>
                                </template>
                                <template v-else-if="dt.bidType==2">
                                    <h5 v-t="'bidRecord.text3'">Put on shelves</h5>
                                    <p></p>
                                </template>
                                <template v-else>
                                    <h5>{{dt.bidAmount.decimalTwoString}} {{dt.currency}}</h5>
                                    <p>$ {{dt.bidUsdAmount.decimalTwoString}}</p>
                                </template>
                            </div>
                        </li>
                        <!-- <li>
                            <div class="bidimgbox">
                                <Image :url="dtData.ownerHeadImage"/>
                            </div>
                            <div class="biditem tbrtx">
                                <h5>{{dtData.ownerName}}</h5>
                                <p>{{dtData.startTime}}</p>
                            </div>
                            <div class="biditem">
                                <h5>Put on shelves</h5>
                                <p></p>
                            </div>
                        </li> -->
                    </ul>
                    <div class="ncjlu" v-else v-t="'bidRecord.text4'">No Bid Record</div>
                </div>
            </div>
        </div>
    </my-dailog>
    
</template>

<script>
import { reactive,toRefs,getCurrentInstance,onMounted,computed } from 'vue'
import {useRoute,useRouter} from 'vue-router'
import { useStore } from 'vuex'
import Image from '@/components/image.vue'
import { useI18n } from 'vue-i18n'

export default {
    components:{
       Image
    },
    props:{
        id:''
    },
    setup(props,context){
        const router = useRouter()
        const route = useRoute()
        const store = useStore()
        const {proxy} = getCurrentInstance()
        const {t} = useI18n()

        const state = reactive({
            dtData:computed(()=>store.state.sell.nftdDetail),
            userInfo:computed(()=>store.state.base.userInfo),
            showFlag:true,
            records:[]
        })

        onMounted(()=>{
            store.dispatch('sell/get_auction_bid_record',{
                limit: 200,
                orderField: "",
                orderType: "",
                page: 1,
                sellRecordId: props.id || state.dtData.sellRecordId
            }).then(res =>{
                state.records = res.data || []
            })
        })

        const close = ()=>{
            context.emit('close')
        }

        return{
            ...toRefs(state),
            close
        }
    }
}
</script>

<style lang="scss" scoped>
    .biRecordBox{
        width: 800px;
        overflow: hidden;
        overflow-y: auto;
        .bidRecordlist{
            width: 100%;
            list-style: none;
            padding: 0 10px;
            font-family: Poppins-Medium, Poppins;
            font-weight: 500;
            color: #FFFFFF;
            line-height: normal;
            li{
                display: flex;
                height: 120px;
                border-left:6px solid #67F8FF ;
                position: relative;
                z-index: 10;
                padding:10px 0 10px 40px;
                &::before{
                    content: '';
                    position: absolute;
                    z-index: 10;
                    width: 16px;
                    height: 16px;
                    border-radius: 50%;
                    background: #67F8FF;
                    left: -12px;
                    top: 50%;
                    margin: -5px 0 0 0;
                }
                .bidimgbox{
                    width: 100px;
                    height: 100px;
                    overflow: hidden;
                    border-radius: 50%;
                    background: #aaadad;
                    flex-shrink: 0;
                }
                .biditem{
                    padding: 0 0 0 20px;
                    flex-shrink: 0;
                    &.tbrtx{
                        flex: 1;
                        width: 0;
                    }
                    h5{
                        font-size: 30px;
                        font-weight: 500;
                        padding:2px 0 0 0;
                        overflow: hidden;
                        text-overflow: ellipsis;
                        white-space: nowrap;
                    }
                    p{
                        font-size: 28px;
                        color: #7299D2;
                        padding: 10px 0 0 0;
                    }
                }
            }
        }
        .ncjlu{
            padding: 100px 0 0 0;
            text-align: center;
            font-size: 38px;
            color: #7AA8DD;
        }
    }

    .propVisitsDgWrap{
        display: flex;
        flex-flow: column;
        width: 100%;
        height: 100%;
        padding: 0 20px;
        .propDgTitle{
            height: 60px;
            line-height: 60px;
            font-weight: 500;
            color: #FFFFFF;
            font-size: 30px;
            em{
                font-style: normal;
                color: #7EE7FF;
                font-weight: 700;
            }
        }
        .propVisitsDgMain{
            flex: 1;
            overflow: hidden;
            overflow-y: auto;
            
        }
        
    }
</style>